<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/css/wp.css" media="all">

    <style>

    </style>
</head>
<body>
<div id="container" class="layuimini-container">
    <div class="layuimini-main">

        <h2 class="wp-module-title">修改密码</h2>
        <div class="wp-module-box">
            <form class="layui-form" action="" lay-filter="example">
                <div class="layui-form-item">
                    <label class="layui-form-label">原密码</label>
                    <div class="layui-input-block">
                        <input type="password" minlength="6" maxlength="15" lay-verify="check" v-model="oldpass" name="username" lay-verify="title" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新密码</label>
                    <div class="layui-input-block">
                        <input type="password" minlength="6" maxlength="15" lay-verify="check" v-model="newpass" name="password" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认新密码</label>
                    <div class="layui-input-block">
                        <input type="password" minlength="6" maxlength="15" lay-verify="check|theSame" v-model="confirmpass" name="password" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin: auto;text-align: center;">
                        <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="data-submit-btn">提交</button>
                    </div>
                </div>
            </form>

        </div>

    </div>
</div>

<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var $ = layui.jquery,
            form = layui.form;

        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                oldpass:'',
                newpass:'',
                confirmpass:''
            },
            mounted:function(){
                this.submitEvent();
            },
            methods: {
                submitEvent:function(){
                    var that = this;
                    // 需要的时候自定义验证规则
                    form.verify({
                        theSame: function(value){
                            if(that.newpass != that.confirmpass){
                                return '新密码与确认密码不一致';
                            }
                        },
                        check:function(value){
                            return that.checkPassword(value);
                        }
                    });

                    // 监听提交操作
                    form.on('submit(data-submit-btn)', function (data) {
                        //var result = JSON.stringify(data.field);
                        //alert(result);
                        var loading = wp.loading();
                        wp.httpPost({
                            url:wp.url('/wp/ewallet/upms/login/passwordAdmin'),
                            data:{
                                oldPassword:that.oldpass,
                                newPassword:that.newpass
                            },
                            success:function(data){
                                wp.closeLoading(loading);
                                layer.msg('密码修改成功');
                            },
                            failure:function(data){
                                wp.closeLoading(loading);
                                if(data.code == '1'){
                                    layer.msg('旧密码错误');
                                    return;
                                }
                            }
                        });

                        return false;
                    });
                },
                checkPassword:function(password){
                    password = password.replace(/\s+/g, ''); // 去掉所有空格
                    if(!password){
                        return("密码为空，请输入")
                    }

                    if(password.length < 6 || password.length > 15){
                        return "密码长度为6-15个字符";
                    }

                    //至少包含一个数字
                    var reg = /(.*?)\d+(.*?)/;
                    var reg1=/^[0-9]*$/;
                    //不能包含空格
                    var reg3 = /^[^ ]+$/;
                    //不能包含转义字符
                    var reg2 = /[<>&"']/im;
                    var isSucc = reg.test(password) && reg3.test(password) && !reg2.test(password) && !reg1.test(password);
                    if(!isSucc) {
                        return "密码必须同时由字母以及数字组成，不能包含空格、< >、等特殊转义字符";
                    }
                }
            }
        });
    });
</script>

</body>
</html>